<template>
  <BasicModal :show="show" title="预约面试" width="30%" :widthComfirm="true" @comfirm="comfirm">
    <template #content>
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ style: { width: '100px', textAlign: 'right' } }">
        <a-form-item label="面试类型" name="interviewType">
          <a-select v-model:value="form.interviewType" placeholder="请选择面试类型" :filter-option="filterOption" show-search>
            <a-select-option :value="item.value" v-for="item in typeList" :key="item.label">{{ item.label
              }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="面试时间" name="appointmentTime">
          <a-date-picker v-model:value="form.appointmentTime" format="YYYY-MM-DD HH:mm" date-format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm" :show-time="{ format: 'HH:mm', minuteStep: 5, }" style="width: 100%;"
            placeholder="请选择面试时间" />
        </a-form-item>

        <a-form-item label="面试官" name="interviewOfficer">
          <a-select v-model:value="form.interviewOfficer" placeholder="请选择面试官" :filter-option="filterOption"
            show-search>
            <a-select-option :value="item.value" v-for="item in statusList" :key="item.label">{{ item.label
              }}</a-select-option>
          </a-select>

        </a-form-item>
        <a-form-item label="面试会议链接" name="interviewUrl">
          <a-input v-model:value="form.interviewUrl" placeholder="面试会议链接" allowClear />
        </a-form-item>
        <a-form-item label="备注" name="remark">
          <a-textarea showCount :maxlength="1000" v-model:value="form.remark" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </template>

  </BasicModal>
</template>

<script setup lang='ts'>
import { ref, watch } from "vue"
import type { Rule } from 'ant-design-vue/es/form';
import BasicModal from "./BasicModal.vue";
import { message } from "ant-design-vue";
import { interviewSchedule, selectUserByRole } from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
const store = comStores()
const { resumeId, processId } = store.currentResume;
const { userName } = store.userInFor
const show = ref<boolean>(false);

const form = ref({
  interviewType: "线上面试",
  appointmentTime: "",
  interviewOfficer: "",
  interviewUrl: "",
  remark: ""
})
const rules: Record<string, Rule[]> = {
  interviewType: [{ required: true, message: '请选择面试类型', trigger: 'change' }],
  appointmentTime: [{ required: true, message: '请选择面试时间', trigger: 'change' }],
  interviewOfficer: [{ required: true, message: '请选择面试官', trigger: 'change' }],
};
const typeList = ref([
  { label: '线上面试', value: "线上面试" },
  { label: '线下面试', value: "线下面试" },
])
const statusList = ref<{ label: string; value?: string | number }[]>([

]);
const filterOption = (input: string, option: any) => {
  return option.key.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
watch(() => show.value, async (val) => {
  if (val) {
    const data = await selectUserByRole("INTERVIEW");
    console.log(data, 'data')
    if (data && data.code == '10000') {
      statusList.value = data.data
    }
  }
})

const formRef = ref<any>(null)

const comfirm = async () => {
  const res = await formRef.value.validate();
  if (!res) return;
  const text = form.value.interviewUrl ||''
  const regex = /(https?:\/\/[^\s#]+)/;
  const match = text?.match(regex);
  let param = {
    resumeId: resumeId,
    processId: processId,
    result: "通过",
    interviewType: form.value.interviewType,
    appointmentTime: form.value.appointmentTime,
    interviewOfficer: form.value.interviewOfficer,
    remark: form.value.remark,
    interviewUrl:match?match[0]:'',
    operator: userName
  }
  const data = await interviewSchedule(param);
  if (data && data.code === '10000') {
    message.success('预约面试成功');
    store.getResumeInfo(resumeId);
    show.value = false
  } else {
    message.error(data.msg)
  }
  // formRef.value.resetFields();
}
defineExpose({ show })
</script>

<style lang="less" scoped>
.progress {
  display: flex;
  justify-content: end;
  margin: 24px 0;
  padding-top: 24px;
  ;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  .desc {

    font-weight: 400;
    font-size: 14px;
    color: #209EE4;

  }
}
</style>